<template>
    <div class="app-container">
      <el-card :style="{ borderRadius: '5px' }">
        <div class="filter-container">
            <el-date-picker v-model="createTimeDateVul" format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:360px"
          @change="handlecreateTimeDateChange" />
        <el-input v-model="model.orderno" placeholder="请输入订单号" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />
        <el-select v-model="model.toshare" style="width: 160px; margin-right:10px" placeholder="请选择转账状态" clearable>
          <el-option v-for="item in toagencyList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
  
          <el-button v-waves type="primary" style="margin-left: 10px" plain icon="el-icon-search"
            @click="handleFilter">搜索</el-button>
        </div>
      </el-card>
      <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
        <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
          color: '',
          fontSize: '',
          backgroundColor: '#dfe6ec',
        }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
          <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
          <el-table-column label="订单号" prop="orderno" min-width="180px" align="center" show-overflow-tooltip />
  
          <el-table-column label="标题" min-width="180px" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.house_title }}</template>
          </el-table-column>
          <el-table-column prop="logo" label="主图" min-width="100px" align="center">
            <template slot-scope="{ row }">
              <div style="display: flex; justify-content: center">
                <HzImg :src="row.logo" cssStyle="height: 80px;width: 80px" />
              </div>
            </template>
          </el-table-column>
  
          <el-table-column label="入住时间" prop="sdate" align="center" show-overflow-tooltip />
          <el-table-column label="下单用户名" prop="user_name" align="center" show-overflow-tooltip />
          <el-table-column label="邀请人用户名" prop="share_name" align="center" show-overflow-tooltip />
          <el-table-column label="佣金金额" prop="share_money" align="center" show-overflow-tooltip />
          <el-table-column label="转账状态" min-width="80px" align="center" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.toshare == 0">未转账</span>
              <span v-if="row.toshare == 1">已转账</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" v-if="scope.row.toshare == 0" plain
              @click="handleTransfer(scope.row)">转账</el-button>
          </template>
        </el-table-column>
        </el-table>
        <div v-show="listLoading" class="pagination-container">
          <el-pagination :current-page.sync="model.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-card>
  
      <el-dialog title="转账商家" :visible.sync="dialogFormVisible" width="800px">
      <div class="userInfo">
        <ul>
          <li>
            用户名：{{ userInfo.name || '--' }}
          </li>
          <li>银行名称：{{ userInfo.bank_name || '--' }}</li>
          <li>账户名：{{ userInfo.account_name || '--' }}</li>
          <li>卡号：{{ userInfo.account_number || '--' }}</li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.stop="onSubmit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    </div>
  </template>
    
  <script>
  import HzFileUpload from "@/custom/HzFileUpload";
  import HzImgUpload from "@/custom/HzImgUpload";
  import HzImg from "@/custom/HzImg";
  import HzLink from "@/custom/HzLink";
  import waves from "@/directive/waves"; // waves directive
  import {
    checkTraderOrderList,
    bankAccount,
    reservePayToShare
  } from "@/api/system/user";
  
  export default {
    name: "Common",
    directives: {
      waves,
    },
    components: {
      HzFileUpload,
      HzImgUpload,
      HzImg,
      HzLink,
    },
    data() {
      return {
        loading: false,
        name: "",
        list: [],
        total: 0,
        listLoading: false,
        dialogFormVisible:false,
        orderid:"",
        extra: {}, //额外参数(用于格式化)
        userInfo: {
        name: "",
        bank_name: "",
        account_name: "",
        account_number: ""
      },
        createTimeDateVul: [],
        toagencyList: [
        { name: "未转账", value: 0 },
        { name: "已转账", value: 1 },
      ],
        model: {
          pageNo: 1,
          pageSize: 10,
        }
      };
    },
    created() {
      this.getList();
    },
  
    mounted() { },
    methods: {
      handlecreateTimeDateChange(v) {
        this.createTimeDateVul = v;
        if (this.createTimeDateVul != null) {
          this.model.sdate = this.createTimeDateVul[0];
          this.model.edate = this.createTimeDateVul[1];
        } else {
          this.model.sdate = "";
          this.model.sdate = "";
        }
        this.model.pageNo = 1;
        this.getList();
      },
  
      handleSizeChange(val) {
        this.model.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.model.pageNo = val;
        this.getList();
      },
      getList() {
        this.listLoading = false;
        checkTraderOrderList(this.model).then((response) => {
          let data = response.data.records;
          this.list = data;
          this.extra = response.extra;
          this.total = response.data.total;
          this.listLoading = true;
        });
      },
      handleFilter() {
        this.model.pageNo = 1;
        this.getList();
      },
      handleTransfer(row) {
      this.orderid = row.orderid;
      bankAccount({ userid: row.userid }).then((response) => {
        this.userInfo = response.data || { name: "" };
        if (this.userInfo.name) {
          this.dialogFormVisible = true;
        } else {
          this.$message({
            message: "暂无银行账户信息 无法操作",
            type: "warning",
          });
        }
      });
    },
    onSubmit() {
        reservePayToShare({ orderid: this.orderid }).then((response) => {
          this.$message({
            message: "转账成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.model.pageNo = 1;
          this.getList();
        });
    },
    },
  };
  </script>
  <style lang="scss" scoped>
  .userInfo {
  ul {
    li {
      margin: 10px 0;
      list-style: none;
    }
  }

  .dialog-footer {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

</style>
    